<template>
  <div>
    <TopFilter ref="topFilter" :list="topFilterList" @filterChange="handleSearch" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      selectionType="single"
      columnsRef="allocationOutRef"
      :columns="columns"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :datakey="'rows'"
      :onSyncTableData="handleSyncTableData"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="changeSelectList"
    >
    </FilterTable>
    <div class="btnWrap">
      <el-button @click="closeDrawer(1)">关闭</el-button>
      <el-button type="primary" @click="closeDrawer(2)">确定</el-button>
    </div>
    <BaseDialog :visible.sync="showPanel" title="标题" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"> </BaseDialog>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { confirmAction, notifyAction } from '@/utils';
import { dealerInfoByAllInfo, queryAllocationOutWithoutIn } from '@/api/part/allocation';
import { getAllUser } from '@/api/customerRepair/activityVisit/resultEntry';

export default {
  mixins: [dictionary],
  data() {
    return {
      topFilterList: this.createTopFIlterList(),
      columns: this.createTableColumns(),
      fetchapi: queryAllocationOutWithoutIn,
      fetchParams: { xhrAbort: true },
      selectList: {},
      showPanel: false,
      syncTableData: [] // 同步的table数据
    };
  },
  mounted() {
    this.getAllUser();
  },
  methods: {
    async getAllUser() {
      const res = await getAllUser();
      this.columns.find(item => item.dataIndex === 'updatedBy').dictItems = res.data.map(x => ({ value: x.userId, text: x.employeeName }));
    },
    createTopFIlterList() {
      return [
        {
          type: 'INPUT',
          label: '调拨出库单号',
          labelWidth: '100px',
          fieldName: 'allocateOutNo'
        },
        {
          type: 'RANGE_DATE',
          label: '出库日期',
          fieldName: 'finishedDateBegin|finishedDateEnd',
          valueFormat: 'yyyy-MM-dd'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '调拨出库单号',
          dataIndex: 'allocateOutNo',
          sorter: true
        },
        {
          title: '调入经销商代码',
          dataIndex: 'customerCode',
          sorter: true
        },
        {
          title: '调入经销商名称',
          dataIndex: 'customerName',
          sorter: true
        },
        {
          title: '出库日期',
          dataIndex: 'finishedDate',
          sorter: true,
          filterType: 'date',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '出库人',
          dataIndex: 'updatedBy',
          sorter: true,
          dictItems: []
        }
      ];
    },
    changeSelectList(val) {
      if (val.length > 0) {
        this.selectList = val[0];
      }
    },
    async closeDrawer(val) {
      if (val == 1) {
        this.$emit('close', false);
      } else {
        this.$emit('addAllocatOut', this.selectList);
      }
    },
    collapseHandle() {
      this.nextTick(() => {
        this.refs.table.EXECUTE_RESET_HEIGHT();
      });
    },
    // 点击搜索
    handleSearch(val) {
      if (val.finishedDateEnd) {
        val.finishedDateEnd = val.finishedDateEnd.substring(0, 11) + ' 23:59:59';
      }
      this.fetchParams = Object.assign({}, val);
    },
    // 同步table数据
    handleSyncTableData(list) {
      this.syncTableData = list;
    }
  }
};
</script>

<style lang="less" scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
